<template>
	<nut-popup 
		v-model:visible="visible"
		position="bottom" 
		closeable 
		round
		safe-area-inset-bottom
		:custom-style="customStyle"
	>
		<view class="title">请选择参与的活动</view>
		<view class="content">
			<view class="item haptics-feedback" 
				v-for="item in activityList" :key="item.activityId"
				@click="toActivityDetail(item?.activityId)"
			>
				{{ item?.name }}
			</view>
		</view>
	</nut-popup>
</template>

<script setup>
import { getActivityJoinSelect } from '@/api/activity';
import { ref, watch } from 'vue'

const customStyle = {
	minHeight: '40%',
	maxHeight: '80%',
	display: 'flex',
	flexDirection: 'column',
}

const visible = defineModel('visible', {
	default: false
})

const activityList = ref([])

const getActivityList = async () => {
	try {
		uni.showLoading({
			title: '加载中...'
		})
		const res = await getActivityJoinSelect()
		activityList.value = res.data
	} catch {
	} finally {
		uni.hideLoading()
	}
}

watch(visible, (val) => {
	if (val) {
		getActivityList()
	} else {
		uni.hideLoading()
	}
})

const toActivityDetail = (activityId) => {
	visible.value = false
	setTimeout(() => {
		uni.navigateTo({
			url: `/pages/activity/detail/index?activityId=${activityId}&sectionId=landing-img2`
		})
	}, 100)
}
</script>
<style lang="scss" scoped>
.title {
	 margin: 44rpx 70rpx 64rpx;
	 font-size: 32rpx;
	 font-weight: 700;
	 text-align: center;
}
.content {
	flex: 1;
	overflow-y: auto;
	padding: 0 42rpx;
	.item {
		height: 146rpx;
		display: flex;
		align-items: center;
		padding: 16rpx 46rpx;
		margin-bottom: 40rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
		background-color: #EDF1F5;
	}
}
</style>